<template>
  <div>
    <header class="register-header">
      <logo class="register-logo"></logo>
      <span>企业注册</span>
    </header>
    <main class="register-main">
      <div class="register-main-table">
        <el-form :model="form" :label-position="labelPos" label-width="7rem">
          <el-form-item label="账号">
            <el-input
              v-model="form.account"
              placeholder="大于9位，小于12位"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="form.password1"
              placeholder="大于6位，小于11位"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" class="checkPwdItem">
            <el-input
              v-model="form.password2"
              placeholder="请保持一致"
              @change="check_password"
            ></el-input>
            <span v-if="showPasswordTip">密码不一致</span>
          </el-form-item>

          <el-form-item label="机构名称">
            <el-input
              v-model="form.org_name"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="营业许可编号">
            <el-input v-model="form.org_id" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="机构类型选择">
            <el-radio
              v-model="form.type"
              :label="item"
              border
              v-for="item of companyType"
              :key="item"
              >{{ item }}</el-radio
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="register"
              icon="el-icon-upload"
              class="register-form-btn"
              >注册</el-button
            >
            <el-button
              @click="clear"
              icon="el-icon-edit"
              class="register-form-btn"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </main>
    <footer class="register-footer"></footer>
  </div>
</template>

<script>
import Logo from "@/components/Logo";
export default {
  components: {
    Logo,
  },
  data() {
    return {
      companyType: ["开发商", "代销机构", "包销机构"],
      labelPos: "left",
      form: {
        type: "开发商",
        account: "",
        password1: "",
        password2: "",
        org_name: "",
        org_id: "",
      },
      showPasswordTip: false,
    };
  },
  methods: {
    clear(){
      this.form.account = "" 
      this.form.password1 = "" 
      this.form.password2 = "" 
      this.form.org_name = "" 
      this.form.org_id = "" 
      this.form.type = "开发商" 
    },
    register() {
      for(let i in this.form){
        if(this.form[i]===""){
          alert("请完成表单")
          return
        }
      }
      if(this.form.password1 !== this.form.password2){
        alert("请保证密码一致");
        return
      }
        if(this.form.account.length<=9||this.form.account.length>=12){
        alert("请保证账号的长度大于9位并且小于12位")
        return 
      }
      if(this.form.password1.length<=6||this.form.password1.length>=11){
        alert("请保证密码的长度大于6位并且小于11位")
        return
      }
      this.axios({
          method: 'post',
          url: 'http://47.99.124.245:8082/addEnterpriseUser',
          data: {
           account:this.form.account,
           password:this.form.password1,
           org_id:this.form.org_id,
           org_name:this.form.org_id,
           type:this.form.type
          }
      }).then((res)=>{
        console.log(res)
        let code = res.data.code
        switch(code){
          case 200:this.$router.push("login");break
          case 400:alert("机构已经注册");this.clear();break
        }
      }).catch((err)=>{
        console.log(err)
      })

    },
    check_password: function () {
      this.showPasswordTip =
        this.form.password1 == this.form.password2 ? false : true;
      console.log(this.showPasswordTip);
    },
  },
};
</script>

<style scope>
* {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.register-header {
  margin: 2rem;
}
.register-logo {
  display: inline-block;
}
.register-logo + span {
  font-size: 1.5rem;
  margin-left: 1rem;
}
.register-main-table {
  max-width: 700px;
  width: 50vw;
  margin: auto;
}

.register-form-btn {
  width: 45%;
}

.register-footer {
  position: fixed;
  bottom: 0;
  margin-top: 1rem;
  background: linear-gradient(to top, rgb(63, 133, 237), rgb(87, 171, 255));
  width: 100%;
  height: 40px;
}
.checkPwdItem {
  position: relative;
}
.checkPwdItem span {
  color: red;
  position: absolute;
  right: -5rem;
}
</style>